<template>
  <div class="userFilmDetail_wrapper">
    <!-- banner S -->
    <section class="top_banner">
      <img src="@/assets/images/logo.png" alt="logo">
    </section>
    <!-- banner E -->
    <!-- userFilmDetail S -->
    <section class="userFilmDetail_content p_8 ">
      <!-- userInfo S -->
      <section id="userInfo_" class="_pr userInfo_ p_20_32 c_737373">
        <!-- user info -->
        <div>
          <img src="@/assets/images/head.png" alt="pic" class="vertical_align_m m_r_40">
          <span class="font_33 vertical_align_m m_r_40">{{filmContent.TC_PT_NAME}}</span>
          <span class="font_28 vertical_align_m m_r_40">{{filmContent.TC_PT_GENDER == 1?'男':'女'}}</span>
          <span class="font_28 vertical_align_m">{{filmContent.TC_PT_AGE}}岁</span>
        </div>
        <!-- 检查信息 -->
        <div class="font_25">
          <p class="p_t_23">
            <span>检查号 </span>
            <span>{{filmContent.TC_ST_GRP_NO}}</span>
          </p>
          <p class="p_t_16">
            <span>检查时间 </span>
            <span>{{filmContent.TC_ST_CHK_TIME}}</span>
          </p>
          <p class="p_t_16">
            <span>检查类型 </span>
            <span>{{filmContent.TC_ST_TYPE}}</span>
          </p>
          <p class="p_t_16">
            <span>检查部位 </span>
            <span>{{filmContent.TC_ST_BODY}}</span>
          </p>

        </div>
        <!-- 验证码 and 网址 -->
        <div class="_pa">
          <div class="c_7fb553 font_25">{{filmContent.securityCode}}</div>
          <div class="c_b5b5b5 font_21">www.powerfilmer.com </div>
        </div>
      </section>
      <!-- userInfo E -->
      <!-- btns wrapper S -->
      <section class="btns_wrapper font_28 c_fff">
        <div @click="goToImgAndText(params)">
          <img src="@/assets/images/tw.png" alt="pic">
          <span>图文报告</span>
        </div>
        <div @click="goToElectronicFilm(params)">
          <img src="@/assets/images/jp.png" alt="pic">
          <span>电子胶片</span></div>
        <div @click="goToImageBrowsing(params)">
          <img src="@/assets/images/yx.png" alt="pic">
          <span>影像浏览</span></div>
      </section>
      <!-- btns wrapper E -->
      <!-- userInfo S -->
      <section class="userInfo_ b_d1e6fe font_25 c_737373 m_b_16">
        <div class="userInfo_title  ">
          影像所见
        </div>
        <div class="userInfo_content ">
          {{filmContent.TC_RP_FINDINGS}}
        </div>
      </section>
      <!-- userInfo E -->
      <!-- userInfo S -->
      <section class="userInfo_ b_d1e6fe font_25 c_737373 ">
        <div class="userInfo_title  ">
          诊断结论
        </div>
        <div class="userInfo_content ">
          {{filmContent.TC_RP_INSPECT_CON}}
        </div>
      </section>
      <section>
        <div @click="goToHistoryPage(params)" class="history_btn b_7fb553 c_fff font_25">历史检查记录</div>
      </section>
      <!-- userInfo E -->
    </section>
    <!-- userFilmDetail E -->
  </div>
</template>

<script>
  import {
    HttpService
  } from "../../provides/index";
  import {
    getNetworkType
  } from '../../utils/index'

  export default {
    components: {},
    props: {},
    data() {
      return {
        params: {},
        filmContent: {}
      };
    },
    watch: {},
    computed: {},
    methods: {
      goToImgAndText(params) {
        this.$store.commit('canLink', false);
        this.$router.push({
          path: "/imgAndText/" + params.studyid + '/' + params.hospcode + '/' + params.patientid + '/' + params.hospdomain
        });
      },
      goToElectronicFilm(params) {
        this.$store.commit('canLink', false);
        this.$router.push({
          path: "/electronicFilm/" + params.studyid + '/' + params.hospcode + '/' + params.patientid + '/' + params
            .hospdomain
        });
      },
      goToImageBrowsing(params) {
        if (getNetworkType() != 'wifi') {
          this.$messagebox({
            title: '温馨提示',
            message: '建议在 WiFi 网路下浏览影像浏览页面',
            showCancelButton: true,
            confirmButtonText: "确认",
            cancelButtonText: "取消"
          }).then(action => {
            if (action == 'confirm') {
              this.$store.commit('canLink', false);
              this.$router.push({
                path: "/imageBrowsing/" + params.studyid + '/' + params.hospcode + '/' + params.patientid + '/' +
                  params.hospdomain
              });
            } else {}
          })
        } else {
          this.$store.commit('canLink', false);
          this.$router.push({
            path: "/imageBrowsing/" + params.studyid + '/' + params.hospcode + '/' + params.patientid + '/' +
              params.hospdomain
          });
        }
      },
      goToHistoryPage(params) {
        this.$store.commit('canLink', false);
        this.$router.push({
          path: "/historyPage",
          query: params
        });
      }
    },
    created() {},
    mounted() {
      this.$store.commit('canLink', true);
      console.log(this.$store.state.canLink);
      this.params = {
        patientid: this.$route.params.patientid,
        studyid: this.$route.params.studyid,
        hospcode: this.$route.params.hospcode,
        hospdomain: this.$route.params.hospdomain
      }
    //   HttpService.api({
    //       url: "/userFilmDetail",
    //       params: this.params,
    //       headers: {}
    //     })
    //     .then(res => {
    //       this.filmContent = res.result || {};
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    }
  };

</script>
<style lang="scss" scoped>
  .userFilmDetail_wrapper_wrapper {}

  .top_banner {
    height: pxToRem(110);
    background: #469feb;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: pxToRem(411);
      height: pxToRem(74);
    }
  }

  .userFilmDetail_content {
    #userInfo_ {
      >div:nth-child(1) {
        line-height: pxToRem(68);

        img {
          width: pxToRem(68);
          height: pxToRem(68);
        }
      }

      >div:nth-child(3) {
        text-align: center;
        width: pxToRem(250);
        height: pxToRem(60);
        bottom: pxToRem(7);
        right: pxToRem(7);
      }
    }

    .userInfo_ {
      border-radius: 7px;
    }

    .userInfo_title {
      padding: pxToRem(17) pxToRem(14);
    }

    .userInfo_content {
      padding: pxToRem(20) pxToRem(20) pxToRem(20) pxToRem(30);
    }
  }

  .btns_wrapper {
    margin: 0.15rem 0;
    display: flex;
    justify-content: space-around;
    text-align: center;

    >div {
      border-radius: pxToRem(6);
      padding: 0.11rem 0;
      width: pxToRem(238);
      height: pxToRem(126);
      background: #7fb553;
      // border: 1px solid green;
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        width: pxToRem(64);
        height: pxToRem(64);
      }
    }
  }

  .history_btn {
    border-radius: pxToRem(6);
    width: pxToRem(412);
    height: pxToRem(72);
    margin: 0 auto;
    line-height: pxToRem(72);
    text-align: center;
    margin-top: pxToRem(68);
  }

</style>
